<style lang="less">
  .special-board {
    .summary{
      width: 100%;
      display: inline-block;
      border: 1px solid #dfe6ec;
      padding: 10px;
      background-color: moccasin;
      font-size: 20px;
      margin: 0px 0px 5px 0px;
    }
    .el-step__title{
      font-weight: bold;
    }
    .error {
      color: red;
    }
  }
</style>

<template>
  <div class="special-board">
    <search-bar more-display label-width="100px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="订单编号">
            <el-input v-model="searchCondition.LIKE_orderNumber"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发运日期">
            <el-date-picker
              v-model="shipmentsDaterange"
              type="daterange"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单状态">
            <el-select v-model="searchCondition.EQ_orderStatus">
              <el-option
                v-for="item in $store.getters.ORDER_STATUS"
                :key="item.id"
                :label="item.cnDictValname"
                :value="item.dictVal">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="货物名称">
            <el-input v-model="searchCondition['LIKE_orderCargos.cargoName']"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收货人">
            <el-input v-model="searchCondition.LIKE_sendContactName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收货人手机">
            <el-input v-model="searchCondition.LIKE_sendContactPhone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="发货人">
            <el-input v-model="searchCondition.LIKE_shipmentsContactName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收货地址">
            <address-select
              v-model="sendAddressSelect" style="width: 100%"></address-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-row>
            <el-col :span="8">
              <el-form-item label="" label-width="40px">
                <el-checkbox v-model="searchConditionExtend.isErrorNum">
                  异常登记
                </el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="" label-width="40px">
                <el-checkbox v-model="searchConditionExtend.isNotDepart">
                  逾期未发车
                </el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="" label-width="40px">
                <el-checkbox v-model="searchConditionExtend.isNotSignOff">
                  逾期未签收
                </el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </search-bar>
    <el-col :span="24" class="summary">
      <div>
        <el-col :span="24">
          {{statistics.name}} 承运统计
        </el-col>
      </div>
      <div style="font-size: 16px;">
        <el-col :span="4">发车数：{{statistics.num || 0}}车次</el-col>
        <el-col :span="4">发运订单数：{{statistics.depart || 0}}票</el-col>
        <el-col :span="4">逾期未发车：<span class="error">{{statistics.overdueNoDepart || 0}}</span>票</el-col>
        <el-col :span="4">逾期未签收：<span class="error">{{statistics.overdueNoSign || 0}}</span>票</el-col>
        <el-col :span="4">异常登记：<span class="error">{{statistics.abnormal || 0}}</span>票</el-col>
        <el-col :span="4">异常签收：<span class="error">{{statistics.abnormalSign || 0}}</span>票</el-col>
      </div>
    </el-col>
    <el-col :span="24" style="margin-bottom: 10px">
      <el-button type="primary" @click="exportExcel">导出</el-button>
      <el-button type="primary" style="float: right" @click="reset">重置</el-button>
      <el-button type="primary" style="float: right" @click="search">查询</el-button>
    </el-col>
    <el-table :data="tableData" max-height="480"
              v-loading="listLoading"
              highlight-current-row border style="width: 100%;">
      <el-table-column label="订单号" width="200">
        <template slot-scope="scope">
          <el-button type="text" style="padding: 0;" @click="openDialog(scope.row.id,scope.row.orderNumber)">
            {{scope.row.orderNumber}}<span v-if="scope.row.noticeDeliveryStatus === 101022002" class="error">等通知放贷</span>
          </el-button>
          <div>{{scope.row.freightNumber}}</div>
          <div>{{scope.row.shipmentsRegion}}</div>
          <div>{{scope.row.sendRegion}}</div>
        </template>
      </el-table-column>
      <el-table-column label="计划时间" width="165">
        <template slot-scope="scope">
          <div>发运日期 {{scope.row.shipmentsDate}}</div>
          <div>分派日期 {{scope.row.assignmentTime}}</div>
          <div v-if="scope.row.extractType === 105002001">
            上门提货
          </div>
          <div v-else>自送网点</div>
          <div v-if="scope.row.sendType === 105001001">
            送货上门
          </div>
          <div v-else>
            网点自提
          </div>
        </template>
      </el-table-column>
      <el-table-column label="货物信息">
        <template slot-scope="scope">
          <div>{{scope.row.cargoNames}}，{{scope.row.amount}}件</div>
          <div>{{scope.row.weight.toFixed(2)}}吨 | {{scope.row.volume.toFixed(2)}}方</div>
        </template>
      </el-table-column>
      <el-table-column label="订单金额(元)" width="160">
        <template slot-scope="scope">
          <div>{{scope.row.agingName}}</div>
          <div>{{scope.row.paymentTypeName}}：{{scope.row.orderPrice}} 元</div>
          <div style="color: #ff4949;">{{scope.row.payStatusName}}</div>
        </template>
      </el-table-column>
      <el-table-column label="发货人信息" width="125">
        <template slot-scope="scope">
          <div>{{scope.row.shipmentsContactName}}</div>
        </template>
      </el-table-column>
      <el-table-column label="收货人信息" width="225">
        <template slot-scope="scope">
          <div>{{scope.row.sendContactName}}</div>
          <div>{{scope.row.sendContactPhone}} {{scope.row.sendTelephone}}</div>
          <div>{{scope.row.sendStreet}}</div>
        </template>
      </el-table-column>
      <el-table-column label="异常" width="120">
        <template slot-scope="scope">
          <div v-if="scope.row.signOffErrorNum">异常登记: <el-button type="text" class="error" style="padding: 0;" @click="openSignOffErrorDialog(scope.row.id,scope.row.orderNumber,scope.row.signOffErrorNum)">
            {{scope.row.signOffErrorNum}}
          </el-button></div>
        </template>
      </el-table-column>
      <el-table-column label="物流状态" width="300">
        <template slot-scope="scope">
          <div style="color: #13ce66">
            <div>{{scope.row.orderStatusName}}</div>
            <div>{{scope.row.trackRemark}}</div>
            <div>{{scope.row.trackTime}}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="发车信息" width="100">
        <template slot-scope="scope">
          <div>
            <div>{{scope.row.plateNumber}}</div>
            <div>{{scope.row.driverName}}</div>
            <div>{{scope.row.driverPhone}}</div>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        :current-page="page"
        :page-size="size"
        @size-change="handleSizeChange"
        @current-change="handleCurrentPageChange"
        layout="total,sizes,prev, pager, next, jumper"
        :total="total" style="float: right">
      </el-pagination>
    </el-col>
    <el-col :span="24">
      <el-steps :active="8" style="margin-top: 10px">
        <el-step title="订单录入" description="货主下单承运商下单"></el-step>
        <el-step title="确认分派" description="大区订单中心核实确认并分派订单，指派需提货订单和分派订单给专线订单"></el-step>
        <el-step title="提货调度" description="大区调度中心安排提货送至各自专线配载点"></el-step>
        <el-step title="配载配货" description="专线发货管理做配载配货计划"></el-step>
        <el-step title="发车确认" description="装车列表做发车确认"></el-step>
        <el-step title="到达接车" description="到达接车管理做到达确认，卸车确认"></el-step>
        <el-step title="签收确认" description="存在未付款的订单先做收款确认后，再做自提签收以及中转及配送签收确认"></el-step>
        <el-step title="报账结算" description="专线到达站提交到达费用报账明细"></el-step>
      </el-steps>
    </el-col>
    <order-track-detail ref="orderTrackDetail" :showOrderDetail="false"></order-track-detail>
    <sign-off-error-record ref="signOffErrorRecord"></sign-off-error-record>
  </div>
</template>

<script>
import {specialBoardStatistics} from '../../api/stowage/LoadingList';
import { getSignOffErrorByOrderId } from '../../api/stowage/SingIn';
import { searchOrganizationOrders } from '../../api/order/orderNew';
import OrderTrackDetail from '../order/OrderTrackDetail.vue';
import SignOffErrorRecord from './SignOffErrorRecord.vue';
export default {
  components: {
    SignOffErrorRecord,
    OrderTrackDetail},
  data () {
    return {
      statistics: {
        name: '',
        abnormal: 0,
        noSign: 0,
        overdueNoSign: 0,
        abnormalSign: 0,
        num: 0,
        noDepart: 0,
        overdueNoDepart: 0,
        depart: 0
      },
      pickerOptions: {
        shortcuts: [{
          text: '今日',
          onClick (picker) {
            picker.$emit('pick', picker.$ue.getToday());
          }
        }, {
          text: '本周',
          onClick (picker) {
            picker.$emit('pick', picker.$ue.getThisWeek());
          }
        }, {
          text: '本月',
          onClick (picker) {
            picker.$emit('pick', picker.$ue.getThisMonth());
          }
        }]
      },
      shipmentsDaterange: [],
      sendAddressSelect: [],
      searchConditionExtend: {
        isErrorNum: false,
        isNotDepart: false,
        isNotSignOff: false
      },
      searchCondition: {
        LIKE_orderNumber: null,
        LT_shipmentsDate: null,
        GTE_shipmentsDate: null,
        LIKE_shipmentsContactName: null,
        EQ_orderStatus: null,
        'LIKE_orderCargos.cargoName': null,
        LIKE_sendContactName: null,
        LIKE_sendContactPhone: null
      },
      page: 1,
      size: 10,
      total: 0,
      tableData: [],
      listLoading: false
    };
  },
  watch: {
    shipmentsDaterange (val) {
      if (val && val.length > 0) {
        if (val[0] !== null) {
          this.searchCondition.GTE_shipmentsDate = val[0].toJSON();
        }
        if (val[1] !== null) {
          let days = this.$ue.addDays(val[1], 1);
          this.searchCondition.LT_shipmentsDate = days.toJSON();
        }
      } else {
        this.searchCondition.GTE_shipmentsDate = null;
        this.searchCondition.LT_shipmentsDate = null;
      }
    }
  },
  methods: {
    exportExcel () {
      if (this.searchCondition.GTE_shipmentsDate !== null && this.searchCondition.LT_shipmentsDate !== null) {
        location.href = '/api/v2.0/admin/special_order?filters=ISNOTNULL_confirmTime;' +
            'GTE_shipmentsDate=' + this.searchCondition.GTE_shipmentsDate + ';LT_shipmentsDate=' + this.searchCondition.LT_shipmentsDate;
      } else {
        this.$message.error('请选择一个日期范围');
      }
    },
    search () {
      let filters = this.$ue.objToFilter(this.searchCondition);
      if (this.searchConditionExtend.isErrorNum) {
        filters += ';GT_signOff.errorNum=0;';
      }
      if (this.searchConditionExtend.isNotDepart) {
        filters += ';ISNOTNULL_ageingWarningNotDepart.id;';
      }
      if (this.searchConditionExtend.isNotSignOff) {
        filters += ';EQ_signOff.signOffStatus=101009001;ISNOTNULL_ageingWarningNotSignOff.id;';
      }
      let addressSelectLength = this.sendAddressSelect.length;
      if (addressSelectLength > 0) {
        switch (addressSelectLength) {
          case 1:
            filters += ';EQ_sendProvinceId=' + this.sendAddressSelect[0];
            break;
          case 2:
            filters += ';EQ_sendProvinceId=' + this.sendAddressSelect[0] + ';EQ_sendCityId=' + this.sendAddressSelect[1];
            break;
          case 3:
            filters += ';EQ_sendProvinceId=' + this.sendAddressSelect[0] + ';EQ_sendCityId=' + this.sendAddressSelect[1] + ';EQ_sendCountyId=' + this.sendAddressSelect[2];
            break;
        }
      }
      this.loadOrders(filters);
    },
    reset () {
      this.$ue.resetObjNull(this.searchCondition);
      this.shipmentsDaterange = this.$ue.getToday();
      this.searchConditionExtend.isErrorNum = false;
      this.searchConditionExtend.isNotDepart = false;
      this.searchConditionExtend.isNotSignOff = false;
      this.sendAddressSelect = [];
    },
    handleSizeChange (size) {
      this.size = size;
      this.search();
    },
    handleCurrentPageChange (page) {
      this.page = page;
      this.search();
    },
    openDialog (id, orderNumber) {
      this.$refs.orderTrackDetail.show(id, orderNumber);
    },
    openSignOffErrorDialog (orderId, orderNumber, errorNum) {
      getSignOffErrorByOrderId({orderId: orderId}).then((res) => {
        this.signOffErrorListData = [];
        if (res.data.successFlg === true && res.data.detailModelList !== null) {
          let list = res.data.detailModelList;
          this.signOffErrorListData = list;
        }
        this.$refs.signOffErrorRecord.show(orderNumber, errorNum, this.signOffErrorListData);
      });
    },
    loadOrders (filters = '') {
      this.listLoading = true;
      searchOrganizationOrders({
        filters: 'ISNOTNULL_confirmTime;' + filters,
        sorts: '+createDate',
        page: this.page,
        size: this.size
      }).then(res => {
        this.listLoading = false;
        if (res.data.successFlg) {
          this.tableData = res.data.detailModelList;
          this.total = res.data.totalCount;
        } else {
          this.$message.error(res.data.errorMsg);
        }
      });
    }
  },
  mounted () {
    specialBoardStatistics().then(res => {
      if (res.data.successFlg) {
        this.statistics = res.data.obj;
      } else {
        this.$message.error(res.data.errorMsg);
      }
    });
    let today = this.$ue.getToday();
    this.shipmentsDaterange = this.$ue.getToday();
    let days = this.$ue.addDays(today[1], 1);
    this.loadOrders('GTE_shipmentsDate=' + today[0].toJSON() + ';LT_shipmentsDate=' + days.toJSON());
    this.$store.commit('initDict');
    this.$store.commit('initOrganizations');
  }
};
</script>
